<template>
  <div id="bookDetailPage">
    <content-nav :title="data.firstItem.title" :topic-code="data.topicCode"></content-nav>
    <div class="page-content">
      <div class="right-btn">
        <div @click="prePage()"
             class="turn-btn"
             :style="pageNum===1?'cursor: not-allowed;':''">
          <div class="info">上一页</div>
        </div>
        <div @click="nextPage()"
             class="turn-btn"
             :style="pageNum===pageTotalNum?'cursor: not-allowed;':''">
          <div class="info">下一页</div>
        </div>
      </div>
      <!-- 一个纯粹的 PDF demo页 需要调整修改 -->
      <div class="pdf-container">
        <div>
          <pdf ref="pdf"
               :src="url"
               :page="pageNum"
               @progress="loadedRatio = $event"
               @page-loaded="pageLoaded($event)"
               @num-pages="pageTotalNum=$event"
               @error="pdfError($event)"
               @link-clicked="page = $event"></pdf>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'
import {getResource, getTopic} from "@/api/CommonApi";
import contentNav from "@/components/contentNav";

export default {
  name: "bookDetailPageTemplate",
  data() {
    return {
      id: '',         // 资源ID
      data: {},       // 数据
      success: false, // 是否加载成功
      pageNum: 1,      // 页码
      pageTotalNum: 1, // 总页数
      curPageNum: 0,   // 当前页数
      loadedRatio: 0,  // 加载进度
      url: ""          // PDF路径
    }
  },
  components: {pdf,contentNav},
  methods: {
    // 上一页函数，
    prePage() {
      var page = this.pageNum
      page = page > 1 ? page - 1 : 1
      this.pageNum = page
    },
    // 下一页函数
    nextPage() {
      var page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 页面加载回调函数，其中e为当前页数
    pageLoaded(e) {
      this.curPageNum = e
    },
    // 其他的一些回调函数。
    pdfError(error) {
      console.error(error)
    },
  },
  mounted() {
    // 根据路由获取ID
    this.id = this.$route.params.id
    // 判断资源是否存在
    if (this.id === '' || this.id === undefined || this.id === null) {
      console.log('ID不存在')
    } else {
      // 获取数据
      getResource(this.id).then(res => {
        if (res.code === 0) {
          this.data = res.result;
          console.log("this.data : ", this.data);
          if (this.data.firstItem !== undefined || this.data.firstItem !== null) {
            // this.initPdf(this.data.firstItem.content)
            this.url = this.data.firstItem.content
            localStorage.setItem("curTitle",this.data.firstItem.title)
            getTopic(this.data.topicCode).then(r=>{
              console.log(r)
            })
          }
        } else {
          console.log('获取数据错误')
        }
      });
    }
  }
}
</script>

<style lang="less" scoped>
#bookDetailPage {
  background-image: url("../../assets/PC-BackgroundImage/HomeBackground.png");  .page-content{
    overflow: auto;
    //height: 800px;
    font-family: PingFang SC;
    width: 100%;
    display: flex;
    /* justify-content: center; */
    position: relative;
    overflow-x: hidden;
    height: calc(100vw * 80% * 1.414286);

    .pdf-container {
      margin: 30px auto;
      background: #FFF;
      width: 65%;
      border: 2px solid #E5E5E5;
      box-shadow: 0 0 0 14px #fff;
      /** PC端 */
      //max-height: calc(100vh - 200px);

    }


    /* 右侧功能按钮区 */

    .right-btn {
      position: fixed;
      right: calc(100vw*0.04);
      bottom: 15%;
      width: 64px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      z-index: 99;
    }

    /* ------------------- 切换页码 ------------------- */

    .turn {
      background-color: #FFF;
      opacity: 0.7;
      //color: #ffffff;
      height: 64px;
      width: 64px;
      //border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px 0;
    }

    .turn-btn {
      background-color: #FFF;
      //opacity: 0.6;
      color: #000;
      height: 110px;
      width: 64px;
      //border-radius: 50%;
      margin: 1px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .info {
        font-size: 16px;
        width: 16px;
      }
    }

    .turn-btn:hover,
    .turn:hover {
      transition: 0.3s;
      opacity: 0.5;
      cursor: pointer;
    }
  }

}
</style>

